<template>
	<view class="article">
<!-- 		<view class="top flex_r_between">
			<view class="tab" :class="{check:tab}" @click="tab=true">文章</view>
			<view class="tab" :class="{check:!tab}" @click="tab=false">收藏</view>
			<view class="line" :style="{left:tab?'20%':'70%'}"></view>
		</view> -->
<!-- 		<view class="commodity" v-if="tab">
			<view :style="{height: navHeght+20+'rpx'}"></view>
			<view class="option" v-for="(item,index) in dataList" :key="index">

				<view class="option-img" @click="$linkTo('./article_detail?article_id='+item.article_id)">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="option-detail">
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-data">
						<view class="look">
							<view class="look-icons">
								<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>{{item.goods_count}}
							</view>
							<view class="look-icons">
								<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>{{item.likes}}
							</view>
						</view>
						<view class="hours">{{$timeago(item.date_add*1000)}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="commodity">
			<view :style="{height: navHeght+20+'rpx'}"></view>
			<view class="option" v-for="(item,index) in data" :key="index">
				<view class="option-title">
					<view class="title-left">
						<view class="option-awater">
							<image :src="item.avatar||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
						</view>
						<view>{{item.nickname}}</view>
					</view>
					<view class="title-right" @click="collection(index,item.article_id)">
						<image src="/pagesB/static/threedoit.png" mode="widthFix"></image>
					</view>
					<view class="isCollection" v-if="isCollection==index" @click="CollectionFun(index,item.article_id)">
						{{item.is_collection==0?'收藏':'取消收藏'}}
					</view>
				</view>

				<view class="option-img" @click="$linkTo('/pages/home/home/article_detail?article_id='+item.article_id)">
					<image :src="item.cover||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
				</view>
				<view class="option-detail">
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-data">
						<view class="look">
							<view class="look-icons">
								<uni-icons class="look-icon" type="eye-filled" color="#777777" size="16"></uni-icons>{{item.browse}}
							</view>
							<view class="look-icons">
								<uni-icons class="look-icon" type="hand-thumbsup-filled" color="#777777" size="16"></uni-icons>{{item.likes}}
							</view>
						</view>
						<view class="hours">{{$timeago(item.date_add*1000)}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部状态 -->
		<view class="bottom-status flex_r_center">
			<image style="width: 280rpx;height: 30rpx;" src="/pagesB/static/homeImg/icon/feimao.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	export default {
		name: 'home',
		data() {
			return {
				tab:true,
				page: 1,
				isCollection:NaN,
				dataList: [],
				data: [],
				access_token:''
			}
		},
		onLoad() {
			if(uni.getStorageSync('access_token')){
			this.access_token=JSON.parse(uni.getStorageSync('access_token'))
			}else{
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
			this.$request('/app/user/getMyArticles', 'post', {
				type: '1',
				access_token:this.access_token
			}).then(res => {
				this.dataList = res.content
			})
			this.$request('/app/user/getCollections', 'post', {
				access_token:this.access_token,
				type:1
			}).then(res => {
				console.log(res)
				this.data = res.content
			})
		},
		onShow() {
			// this.time = Math.round(new Date().getTime() / 1000).toString()
		},
		methods: {
			del(e){
				this.$request('/app/user/deleteDraft', 'post', {
					page: this.page,
					access_token:this.access_token,
					article_id:e
				}).then(res => {
					uni.showToast({
						title:res.message
					})
					this.$request('/app/user/getMyArticles', 'post', {
						type: '1',
						access_token:this.access_token
					}).then(res => {
						this.dataList = res.content
					})
				})
			},
			fabu(e){
				this.$request('/app/user/poster', 'post', {
					page: this.page,
					access_token:this.access_token,
					article_id:e
				}).then(res => {
					uni.showToast({
						title:res.message
					})
					this.$request('/app/user/getMyArticles', 'post', {
						type: '1',
						access_token:this.access_token
					}).then(res => {
						this.dataList = res.content
					})
				})
			},
			collection(index,id) {
				if(this.isCollection===NaN || this.isCollection != index){
					this.isCollection = index
				}else{
					this.isCollection=NaN
				}
			},
			CollectionFun(index,id){
				if(this.dataList[index].is_collection){
					this.dataList[index].is_collection=1
				}else{
					this.dataList[index].is_collection=0
				}
				this.$request('/app/article/collection','post',{
					access_token:uni.getStorageSync('access_token'),
					article_id:id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/flex.css");
	.article{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.drafts{
		height: 100%;
		background: #F3F4F5;
		padding-top: 20rpx;
		.drafts_item{
			background-color: #fff;
			margin-bottom: 20rpx;
			.item_top{
				padding: 20rpx;
				border-bottom:1px solid #EEEEEE;
				.item_title{
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #111111;
					margin-bottom: 20rpx;
				}
				.item_content{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;
				}
			}
			.item_buttom{
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.buttom_left{
					display: flex;
					.buttom{
						padding-left: 30rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}
					.edit{
						background: url(/pagesB/static/edit.png) no-repeat -1rpx 0rpx ;
						background-size: 30rpx 35rpx;
					}
					.del{
						background: url(/pagesB/static/homeImg/icon/search_del@2x.png) no-repeat 0rpx 6rpx;
						background-size: 26rpx 26rpx;
						margin-left: 20rpx;
					}
				}
				.buttom_right{
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
					border-radius: 24rpx;
					border: 1px solid #DB1B22;
					padding: 6rpx 20rpx;
				}
			}
		}
	}
	.top{
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		position: relative;
		line-height: 100rpx;
		text-align: center;
		border-top: 1px solid #F3F4F5;
		.tab{
			width: 50%;
			height: 100%;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			
		}
		.check{
			font-weight: 600;
		}
		.line{
			width: 80rpx;
			height: 4rpx;
			background: #DB1B22;
			border-radius: 2rpx;
			position: absolute;
			bottom: 10rpx;
			// left: 20%;
		}
	}
	.commodity {
		padding: 20rpx ;
		flex: 1;
		background-color: #F3F4F5;
		overflow-x: scroll;
		.option {
			background: #FFFFFF;
			width: 100%;
			padding-bottom: 10rpx;
			margin: 20rpx 0;

			border-radius: 10px;
overflow: hidden;
			.option-title {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.title-left {
					color: #777777;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.option-awater {
						width: 48rpx;
						height: 48rpx;
						border-radius: 99px;
						margin-right: 16rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.title-right {
					width: 24rpx;
					height: 24rpx;

					image {
						width: 100%;
					}
				}

				.isCollection {
					position: absolute;
					top: 80rpx;
					right: 20rpx;
					height: auto;
					width: auto;
					padding: 20rpx;
					background: #FFFFFF;
					box-shadow: 0px 2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
					border-radius: 6rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					// line-height: 80rpx;
				}
			}

			.option-img {
				width: 100%;
				height: 420rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.option-detail {
				padding: 20rpx;

				.detail-title {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 28rpx;
				}

				.detail-data {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #777777;
					font-size: 20rpx;

					.look {
						display: flex;
						align-items: center;

						.look-icons {
							display: flex;
							align-items: center;
							margin-right: 20rpx;

							.look-icon {
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}

		.bottom-status {
			margin: 20rpx 0;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			padding: 10rpx 0;
			background-color: #F3F4F5;
		}
	}
</style>
